<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="/css/kube.css">
    <link href="http://source.luckyjing.com/toastr.css" rel="stylesheet">
    <style>
        body {
            margin-top: 50px;
        }

        colunm {
            position: relative;
        }

        #changePage {
            position: absolute;
            right: 50px;
            top: 50px;
        }

        a samp {
            padding: 10px 15px;
        }

        input {
            transition: all .5s ease-in;
        }
    </style>
</head>
<body>
<row centered>
    <column cols="6">
        <h1 class="text-centered">注册</h1>
        <a href="/signin" id="changePage">
            <samp>登录</samp>
        </a>
    </column>
</row>
<row centered>
    <column cols="6">
        <form class="forms" id="signupForm">
            <section>
                <label>用户名<span class="req">*</span></label>
                <input type="text" name="username">
            </section>
            <section>
                <label>密码<span class="req">*</span></label>
                <input type="password" name="password">
                <div class="desc">密码至少6位</div>
            </section>
            <section>
                <label>真实姓名<span class="req">*</span></label>
                <input type="text" name="name">
            </section>
            <section>
                <label>用户类别</label>
                <label class="checkbox"><input type="radio" name="type" value="0">普通员工</label>
                <label class="checkbox"><input type="radio" name="type" value="1">专家</label>
                <label class="checkbox"><input type="radio" name="type" value="2">管理员</label>
            </section>
            <section>
                <label>公司</label>
                <select class="select" name="company">
                    <option value="0">母公司</option>
                    <option value="1">分公司1</option>
                </select>
            </section>
            <section>
                <label>部门</label>
                <select class="select" name="section">
                    <option  value="0">大型建筑设备修理部门</option>
                    <option  value="1">汽车修理部门</option>
                    <option  value="2">家电修理部门</option>
                    <option  value="3">计算机修理部门</option>
                </select>
            </section>
            <section class="text-centered">
                <button type="primary" class="signup">注册</button>
            </section>
        </form>
    </column>
</row>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script>
    toastr.options = {
        "positionClass": "toast-top-center",
    };
    $("[name='username']").on('blur', function (event) {
        var target = $(event.target);
        var base = '用户名<span class="req">*</span>';
        var success = '<span class="success">恭喜,此用户名未被使用</span>';
        var error = '<span class="error">很抱歉,此用户名已被使用</span>';
        var label = target.siblings('label');
        if (target.val().trim()) {

            $.post('/users/search/' + target.val().trim(), function (res) {
                if (res.status == 1000) {
                    target.removeClass().addClass('input-success');
                    label.html(base + success);
                } else {
                    target.removeClass().addClass('input-error');
                    label.html(base + error);
                }
            })
        } else {
            target.removeClass();
            label.html(base);
        }
    });
    $(".signup").on('click', function (event) {
        event.preventDefault();
        $.post('/signup', $("#signupForm").serialize(), function (res) {
            if (res.status == 1000) {
                toastr.success("注册成功,即将前往登录界面");
                setTimeout(function () {
                    window.location.href = '/';
                },2000);
            } else {
                toastr.info("请检查您的输入");
            }
        })
    })
</script>
</body>
</html>